<template>
  <div class="dndList">
    <div
      :style="{width:width1}"
      class="dndList-list backG"
    >
      <div class="top">
        <h3>{{ list1Title }}</h3>
        <h4>总价：￥{{ price }}</h4>
      </div>
      <ul>
        <li style="width:10%">药品编码</li>
        <li style="width:20%">药品名称</li>
        <li style="width:15%">药品原价</li>
        <li style="width:15%">会员售价</li>
        <li style="width:20%">药品数量</li>
        <li style="width:20%">编辑</li>
      </ul>
      <draggable
        :set-data="setData"
        :list="list1"
        group="article"
        class="dragArea"
      >
        <div
          v-for="element in list1"
          :key="element.id"
          class="list-complete-item"
        >
          <div class="list-complete-item-handle">
            <ul>
              <li style="width:10%">{{ element.code }}</li>
              <li style="width:20%">{{ element.name }}</li>
              <li style="width:15%">￥{{ element.sellingPrice }}</li>
              <li style="width:15%">￥{{ element.Trueprice }}</li>
              <li style="width:20%">
                {{ element.number }}
              </li>
              <li style="width:20%">
                <el-button
                  class="el-button"
                  type="danger"
                  @click="deleteEle(element)"
                >删除</el-button>
              </li>
            </ul>
          </div>
        </div>
      </draggable>
    </div>
    <div
      :style="{width:width2}"
      class="dndList-list"
    >
      <div class="top">
        <h3>{{ list2Title }}</h3>
        <div>
          <el-autocomplete
            v-model="search"
            :fetch-suggestions="querySearchAsync"
            placeholder="请输入要查找的药品名称"
            value-key="name"
            @select="handleSelect"
            @keyup.enter.native="handleSelect2"
          />
        </div>

      </div>
      <ul>
        <li style="width:10%">库存</li>
        <li style="width:20%">药品名称</li>
        <li style="width:15%">药品原价</li>
        <li style="width:15%">会员售价</li>
        <li style="width:20%">药品数量</li>
        <li style="width:20%">编辑</li>
      </ul>
      <draggable
        :list="list2"
        group="article"
        class="dragArea"
      >
        <div
          v-for="element in list2"
          :key="element.id"
          class="list-complete-item"
        >
          <el-popover
            placement="top-start"
            :title="'厂家：'+element.factory"
            trigger="hover"
          >

            <div slot="reference" class="list-complete-item-handle2">
              <ul>
                <li style="width:10%">{{ element.number }}</li>
                <li style="width:20%">{{ element.name }}</li>
                <li style="width:15%">￥{{ element.sellingPrice }}</li>
                <li style="width:15%">￥{{ element.Trueprice }}</li>
                <li style="width:20%">
                  <el-input
                    v-model="element.numberK"
                    style="width:100%;float:right"
                    type="numberK"
                  />
                </li>
                <li style="width:20%">
                  <el-button
                    class="el-button"
                    style="float:right"
                    type="primary"
                    @click="pushEle(element)"
                  >增加</el-button>
                </li>
              </ul>
            </div>
          </el-popover>
        </div>
      </draggable>
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import { getMedicinesByName, getMedicines } from '@/api/medicine'
import { addPrescriptionMedicine, deletePrescriptionMedicine } from '@/api/prescription'

export default {
  name: 'DndList',
  components: { draggable },
  props: {
    list1: {
      type: Array,
      default() {
        return []
      }
    },
    list1Title: {
      type: String,
      default: 'list1'
    },
    list2Title: {
      type: String,
      default: 'list2'
    },
    width1: {
      type: String,
      default: '47%'
    },
    width2: {
      type: String,
      default: '47%'
    },
    prescriptionId: {
      type: String,
      default: ''
    },
    level: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      search: '',
      price: 0,
      list2: []
    }
  },
  watch: {
    async level(val) {
      console.log(val)
      const { data } = await getMedicines({ pageNum: 1,
        pageSize: 50, disable: 0 })
      this.list2 = data.list
      if (this.level !== 0) {
        for (const i in this.list2) {
          this.list2[i].Trueprice = this.list2[i].medicinePriceDOList[this.level - 1] ? this.list2[i].medicinePriceDOList[this.level - 1].sellingPrice : this.list2[i].sellingPrice
        }
      } else {
        for (const i in this.list2) {
          this.list2[i].Trueprice = this.list2[i].sellingPrice
        }
      }
    },
    async  prescriptionId() {
      this.price = 0
      const { data } = await getMedicines()
      this.list2 = data.list
      console.log(this.list2)
      if (this.level !== 0) {
        for (const i in this.list2) {
          this.list2[i].Trueprice = this.list2[i].medicinePriceDOList[this.level - 1] ? this.list2[i].medicinePriceDOList[this.level - 1].sellingPrice : this.list2[i].sellingPrice
        }
      } else {
        for (const i in this.list2) {
          this.list2[i].Trueprice = this.list2[i].sellingPrice
        }
      }
    }
  },
  async created() {
    const { data } = await getMedicines()
    this.list2 = data.list
    console.log(this.list2)
    if (this.level !== 0) {
      for (const i in this.list2) {
        this.list2[i].Trueprice = this.list2[i].medicinePriceDOList[this.level - 1] ? this.list2[i].medicinePriceDOList[this.level - 1].sellingPrice : this.list2[i].sellingPrice
      }
    } else {
      for (const i in this.list2) {
        this.list2[i].Trueprice = this.list2[i].sellingPrice
      }
    }
  },
  methods: {
    isNotInList1(v) {
      return this.list1.every(k => v.id !== k.id)
    },
    isNotInList2(v) {
      return this.list2.every(k => v.id !== k.id)
    },
    async deleteEle(ele) { // 删除的时候
      const requst = {}
      requst.id = ele.id
      const res = await deletePrescriptionMedicine(requst)
      this.price = res.data
      this.$emit('setPrice', res.data)
      for (const item of this.list1) {
        if (item.id === ele.id) {
          const index = this.list1.indexOf(item)
          this.list1.splice(index, 1)
          break
        }
      }
      if (this.isNotInList2(ele)) {
        console.log(ele)
        const data = Object.assign({}, ele)
        data.id = data.medicineId
        data.number = data.kucun
        this.list2.unshift(data)
      }
    },
    async pushEle(ele) { // 新增的时候
      if (!ele.numberK) {
        this.$message({
          message: '请输入数量'
        })
        return
      }
      if (ele.numberK > ele.number) {
        this.$message({
          message: '库存不足'
        })
        return
      }
      console.log(this.list1)
      for (const i in this.list1) {
        console.log(this.list1[i], ele.id)
        if (this.list1[i].medicineId === ele.id) {
          this.$message({
            type: 'warning',
            message: '已经添加过此药，如需重复添加，请先删除'
          })
          return
        }
      }
      const data = {}
      data.medicinalId = ele.id
      data.number = ele.numberK
      data.prescriptionId = this.prescriptionId
      data.sellingPrice = ele.sellingPrice
      data.sold = 1
      // data.
      const res = await addPrescriptionMedicine(data) // 添加的时候
      const eleData = { ...ele }
      this.price = res.data.totalAmount
      this.$emit('setPrice', this.price)
      eleData.medicineId = ele.id
      eleData.id = res.data.id
      eleData.kucun = ele.number
      eleData.number = ele.numberK

      for (const item of this.list2) {
        if (item.id === ele.id) {
          const index = this.list2.indexOf(item)
          this.list2.splice(index, 1)
          break
        }
      }
      if (this.isNotInList1(ele)) {
        this.list1.push(eleData)
      }
    },
    setData(dataTransfer) {
      // to avoid Firefox bug
      // Detail see : https://github.com/RubaXa/Sortable/issues/1012
      dataTransfer.setData('Text', '')
    },
    async querySearchAsync(queryString, cb) {
      var results = []
      if (queryString) {
        const queryData = { name: queryString }
        const { data } = await getMedicinesByName(queryData)
        if (data.length === 0) {
          results = [{ 'mobile': '暂无数据' }]
          cb(results)
        } else {
          results = data
          cb(results)
        }
      } else {
        cb(results)
      }
    },
    async handleSelect(item) {
      console.log(item)
      const { data } = await getMedicines({ name: item.name })
      console.log(data)
      this.list2 = data.list
    },
    async handleSelect2(item) {
      const { data } = await getMedicines({ name: this.search })
      this.list2 = data.list
    }
  }
}
</script>

<style lang="scss" scoped>
.dndList {
  background: #fff;
  padding-bottom: 40px;
  &:after {
    content: "";
    display: table;
    clear: both;
  }
  .dndList-list {
    float: left;
    padding-bottom: 30px;
    &:first-of-type {
      margin-right: 2%;
    }
    .dragArea {
      margin-top: 15px;
      padding-bottom: 30px;
      min-height: 500px;
      max-height: 500px;
      overflow: auto;
    }
  }
}

.list-complete-item {
  cursor: pointer;
  position: relative;
  font-size: 14px;
  padding: 5px 12px;
  margin-top: 4px;
  border: 1px solid #bfcbd9;
  transition: all 1s;
}

.list-complete-item-handle {
  overflow: hidden;
  text-overflow: ellipsis;
  // white-space: nowrap;
  // margin-right: 50px;
}

.list-complete-item-handle2 {
  overflow: hidden;
  text-overflow: ellipsis;
  // white-space: nowrap;
  // margin-right: 20px;
}

.list-complete-item.sortable-chosen {
  background: #4ab7bd;
}

.list-complete-item.sortable-ghost {
  background: #30b08f;
}

.list-complete-enter,
.list-complete-leave-active {
  opacity: 0;
}
.span {
  width: 300px;
}
ul {
  display: flex;
  justify-content: flex-start;
  padding: 0;
  text-align: center;
}
ul li {
  display: block;
}
// ul :nth-of-type(1) {
//   width: 10%;
// }
ul :nth-of-type(2) {
  width: 30%;
}
ul :nth-of-type(3) {
  width: 15%;
  color: red;
}
ul :nth-of-type(4) {
  width: 30%;
}
ul :nth-of-type(5) {
  width: 15%;
}
.el-buttton {
  width: 304px;
}
.top {
  display: flex;
  justify-content: space-between;
}
h4 {
  color: red;
  padding: 0 40px;
}
.backG{
  background-color: #eee;
}
</style>
